@charset "utf-8";


@import "common";


.container-fluid{
    /*热门游戏*/
    .hotgame{
        .row{
            &:last-of-type{
                margin-top: 20px ;
                margin-bottom: 92px;
                .hot_content{
                    text-align: left;
                    img:nth-of-type(even){
                       float: right;
                       &:after{
                           content: "";
                           display: block;
                           clear: both;
                       }
                    }
                }
            }
            /*热门标签*/
            .title{
                width: 40px;
                height: 100px;
                color: #fff;
                background: #e14738;
                font-size: 20px;
                padding: 25px 10px;
                position: absolute;
                &:after{
                    content: "";
                    display: block;
                    border-left: 20px solid transparent;
                    border-right: 20px solid transparent;
                    border-bottom: 14px solid #fff;
                    position: relative;
                    bottom: -5px;
                    left: -10px;
                }
            }
            .hot_img{
                margin-top: 40px;
            }
            .hot_content{
                font-size: 0;
                text-align: right;
                padding-left: 2%;
                &:after{
                    content: "";
                    display: block;
                    clear: both;
                }
                h2{
                    font-size: 30px;
                    color: #2a2a2a;
                    margin-top: 30px;
                }
                p{
                    font-size: 12px;
                    color: #898989;
                    line-height: 30px;
                    margin-bottom:20px;
                }
                img{
                    display: inline-block;
                    cursor:pointer; 
                    transition: all .4s ease-in-out;
                    &:nth-of-type(odd){
                       float: left;
                       &:after{
                           content: "";
                           display: block;
                           clear: both;
                       }
                    }
                    &:nth-of-type(2),&:first-of-type{
                        margin-bottom: 30px;
                    }
                    &:hover{
                        box-shadow: 2px 5px 20px rgba(0,0,0,.8);
                    }
                }
            }
        }
    }
    /*更多案例*/
    .gamecase{
        .case_title{
            h2{
                font-size: 36px;
                color: #010101;
                padding-left: 15px;
                margin-top: -20px;
                line-height: 70px;
            }
        }
        .case_content{
            a:hover{
                p{
                    color: skyblue;
                }
                .case_img{
                    box-shadow: 2px 5px 20px rgba(0,0,0,.8);
                }
            }
            .case_img{
                position: relative;
                width: 100%;
                max-width: 303px;
                text-align: center;
                overflow: hidden;
                border-radius: 5px;
                img{
                    max-width: 100%;
                    vertical-align: middle;
                    transition: all .4s ease-in-out;
                }
                .case_text{
                    width: 100%;
                    height: 100%;
                    line-height: 20px;
                    font-size: 12px;
                    color: #fff;
                    padding: 10px 12px;
                    position: absolute;
                    top: 0;
                    text-align: left;
                    transform: translateY(-100%);
                    transition: all .4s ease-in-out;
                }
                &:hover .case_text{
                    transform: translateY(0);
                }
                &:hover img{
                    opacity: .6;
                }
            }
            p{
                width: 303px;
                font-size: 14px;
                color: #2a2a2a;
                text-align: center;
                margin: 10px 0px 40px;
            }
        }
    }
}


/*小屏幕 平板 (≥768px)*/
@media only screen and (max-width:991px) and (min-width:768px){
    .container-fluid{
        /*热门游戏*/
        .hotgame{
             .hot_img{ display: none; }
             .row{
                 .title{
                     height: 80px;
                     padding: 6px 10px;
                 }
                 .hot_content h2{
                     text-align: center;
                     margin-top: 50px;
                 }
             }
        }
        /*更多案例*/
        .gamecase{
            margin-bottom: 30px;
            .case_title{
                h2{
                    text-align: center;
                }
            }
            .case_content{
                >div:nth-of-type(even){
                    a{ float: right; }
                }
                .case_img .case_text{
                     display: none;
                }
            }
        }
    }
}

/**手机端<768px)**/
@media only screen and (max-width:767px){
    .container-fluid{
        /*热门游戏*/
        .hotgame{
            .hot_img{ display: none; }
            .row{
                .title{
                    height:50px ;
                    font-size:12px ;
                    padding:2px 10px;
                    right: 3%;
                    text-align: center;
                    &:after{
                        bottom:-1px;
                    }
                }
                .hot_content{
                    text-align: center; 
                    padding-left: 15px;
                    p{
                        text-align: left;
                    }
                    img{
                        margin-top: 30px;
                        margin-bottom: 30px;
                        &:first-of-type{
                            margin-top: 0;
                        }
                    }
                    img:nth-of-type(even){
                       float: none;
                       margin: 0 auto;
                       &:after{
                           content: "";
                           display: block;
                           clear: both;
                       }
                    }
                }
//              &:last-of-type .hot_content{
//                  text-align: center;
//                  img:nth-of-type(even){
//                      float: none;
//                  }
//              }
            }
        }
        /*更多案例*/
        .gamecase{
            margin-bottom: 30px;
            .case_title{
                h2{
                    text-align: center;
                }
            }
            .case_content{
                text-align: center;
                .case_img .case_text{
                     display: none;
                }
                a{
                    display:inline-block;
                }
            }
        }
    }
}


/**手机端图片适配(660px<n<767px)**/
@media only screen and (min-width:660px) and (max-width:767px){
    .container-fluid{
        .hotgame .row .hot_content{
            text-align: left;
            img:nth-of-type(even){
                float: right;
            }
            img:nth-of-type(odd){
                float: none;
            }
            img{
                margin-top: 0px;
                margin-bottom: 0px;
            }
        }
    }
}

@media only screen and (max-width:660px){
    .container-fluid{
        .hotgame .row:last-of-type .hot_content{
            text-align: center;
            img:nth-of-type(even){
                float: none;
            }
        }
        .hotgame .row .hot_content{
            img:nth-of-type(odd){
                float: none;
            }
        }
        
    }
}
